<template>
  <div class="main">
    <div class="mgtop"></div>
    <transition name="el-fade-in-linear">
    <div class="loginform" v-show="show">
      <el-tabs v-model="activeName"  class="login" id="login">
        <el-tab-pane label="登录" name="login">

          <el-form :label-position="labelPosition" :v-model="loginForm" v-loading="fullscreenLoading">
            <el-form-item>
								<el-input prefix-icon="fa fa-user" type="text" placeholder="用户名" v-model="loginForm.userName"></el-input>
            </el-form-item>
            <el-form-item>
								<el-input prefix-icon="fa fa-lock" type="password" placeholder="密码" v-model="loginForm.pwd"></el-input>
            </el-form-item>
            <el-form-item>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            <el-button type="text" style="float:right;">忘记密码</el-button>
            </el-form-item>
            <el-button type="primary" round style="width:100%" @click="submitForm()" @keydown="submitForm()">登录</el-button>
          </el-form>

        </el-tab-pane>
        <el-tab-pane label="注册" name="reg">
          
          <el-form :label-position="labelPosition" v-model="regForm">
            <el-form-item prop="userName">
								<el-input prefix-icon="fa fa-user" type="text" placeholder="用户名" v-model="regForm.userName"></el-input>
            </el-form-item>
            <el-form-item prop="pwd">
								<el-input prefix-icon="fa fa-lock" type="password" placeholder="密码" v-model="regForm.pwd"></el-input>
            </el-form-item>
            <el-form-item prop="pwd2">
                <el-input prefix-icon="fa fa-lock" type="password" placeholder="重复密码" v-model="regForm.pwd2"></el-input>
            </el-form-item>
            <el-button type="primary" round style="width:100%" @click="reg">注册</el-button>
          </el-form>

        </el-tab-pane>
      </el-tabs>
    </div>
    </transition>
  </div>
</template>
<script>
import 'font-awesome/css/font-awesome.css'
import axios from 'axios'
import Vue from 'vue'
import qs from 'qs'
//querystring,json转化库
import lockr from 'lockr'
import { Message } from 'element-ui'
import {def} from 'src/data'
//加密函数
// import 'src/data/user.js'
export default {
    data() {
      var ValidatePass2 = (rule, value, CallBack) => {
        if (value === '') {
          CallBack(new Error('请再次输入密码'));
        } else if (value !== this.regForm.pwd) {
          CallBack(new Error('两次输入密码不一致!'));
        } else {
          CallBack();
        }
      }
      return {
        rules:{
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          pwd2: [
            { validator: ValidatePass2, trigger: 'blur' }
          ],
        },
        checked:false,
        activeName: 'login',
        labelPosition:'top',
        show:false,
        fullscreenLoading:false,
        loginForm:{
          userName:"",
          pwd:""
        },
        regForm:{
          userName:"",
          pwd:"",
          pwd2:""
        }
      }
    },
    mounted(){
      setTimeout(() => {
        this.show=true
      }, 400);  
    },
    methods: {
      submitForm() {//提交
        if(this.loginForm.userName==''){
            Message({
              message: '请输入用户名',
              type: 'error'
            });
          return
        }
        if(this.loginForm.pwd==''){
          Message({
              message: '请输入密码',
              type: 'error'
            });
          return
        }
        var _this=this
        this.fullscreenLoading=true;
        var param = new URLSearchParams()
        param.append("userName",this.loginForm.userName)
        param.append("password",this.loginForm.pwd)
        axios.get('/login.do',{params:param}).then(r=>{
          // console.log(r.data)
          this.fullscreenLoading=false
          if(r.data.code=="200"){
            def(r.data.response.userinfo.ispower)
            if(r.data.response.userinfo.ispower==1|| r.data.response.userinfo.ispower==2||r.data.response.userinfo.ispower==3){
              lockr.set('username',this.loginForm.userName)
              if(_this.checked){
                lockr.set('pwd',this.loginForm.pwd)
                lockr.set('checked',true)
              }
              switch (r.data.response.userinfo.ispower) {
                case 1:
                  Message({
                    message: '欢迎您，超级管理员！',
                    type: 'success'
                  });
                  break;
                case 2:
                  Message({
                    message: '欢迎您，客服！',
                    type: 'success'
                  });
                  break;
                case 3:
                  Message({
                    message: '欢迎您，财务！',
                    type: 'success'
                  });
                  break;
              
                default:
                  break;
              }
            }else{
              lockr.set('username',this.loginForm.userName)
              if(_this.checked){
                lockr.set('pwd',this.loginForm.pwd)
              }else{
                lockr.rm('pwd')
              }
              if(r.data.response.userinfo.shop.shopId==''||r.data.response.userinfo.shop.shopId==undefined){
                Message({
                  message: '店长权限识别失败,请联系管理员',
                  type: 'info'
                });
                return
              }
              lockr.set('TOPshopID',r.data.response.userinfo.shop.shopId)
              lockr.set('TOPshopName',r.data.response.userinfo.shop.shopName)
              Message({
                message: '登录成功',
                type: 'success'
              });
            }
            router.push('/Index');
          }else{
            Message({
              message: r.data.message,
              type: 'info'
            });
          }
        })
      },
      reg(){
        var _this=this
        var pp=new URLSearchParams()
        if(!this.regForm.userName){
          this.$message.error("请填写用户名")
          return
        }
        pp.append('username',this.regForm.userName)
        if(!this.regForm.pwd){
          this.$message.error("请填写密码")
          return
        }
        pp.append('password',this.regForm.pwd)
        axios.get('/RegisterUser.do',{params:pp}).then(r=>{
          if(r.data.code==200){
            _this.$message.success("注册成功")
            location.reload()
          }else{
            _this.$message.error(r.data.message)
          }
        })
      }
    },
    created(){
      if(lockr.get('username')!=''){
        this.loginForm.userName=lockr.get('username')
      }
      if(lockr.get('pwd')!=''){
        this.loginForm.pwd=lockr.get('pwd')
        this.checked=lockr.get('checked')
      }
    }
  }
</script>
<style>
  .main{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url('../../assets/login-bg.jpg')
  }
  .login{
    width: 80%;
    margin: 0 auto;
  }
  .mgtop{
    padding-bottom: 15%;
  }
  #login>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
    width: 50%;
    font-size: 18px;
    text-align: center;
  }
  #login>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item.is-active {
    color: #20a0ff;
    transform: translateX(0px);
  }
  .loginform{
    margin: 0 auto;
    width: 20%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
  }
  .el-tabs__nav{
    width: 100% !important;
  }
  
</style>
